/**
 * @var discoloration 鼠标滑过改变颜色
 */

// 导航栏 
var discoloration = document.getElementById("discoloration");
var li = discoloration.children;
for (var i = 0; i < li.length; i++) {
    li[i].onmouseover = function () {
        this.style.background = "black";
    }
    li[i].onmouseleave = function () {
        this.style.background = "#fee300";
    }
}
var job = document.getElementById("job");
var ul = job.querySelector("ul");

var active = document.getElementById("active");
var ul1 = active.querySelector("ul");

var matter = document.getElementById("matter");
var ul2 = matter.querySelector("ul");

var course = document.getElementById("course");
var ul3 = course.querySelector("ul");

var ellipsis = document.getElementById("ellipsis");
var ul4 = ellipsis.querySelector("ul");
//console.log(job);
ul.style.display = "none";
job.onmouseover = function () {
    this.style.background = "black";
    ul.style.display = "block";
}
job.onmouseleave = function () {
    this.style.background = "#fee300";
    ul.style.display = "none";
}

ul1.style.display = "none";
active.onmouseover = function () {
    this.style.background = "black";
    ul1.style.display = "block";
}
active.onmouseleave = function () {
    this.style.background = "#fee300";
    ul1.style.display = "none";
}

ul2.style.display = "none";
matter.onmouseover = function () {
    this.style.background = "black";
    ul2.style.display = "block";
}
matter.onmouseleave = function () {
    this.style.background = "#fee300";
    ul2.style.display = "none";
}

ul3.style.display = "none";
course.onmouseover = function () {
    this.style.background = "black";
    ul3.style.display = "block";
}
course.onmouseleave = function () {
    this.style.background = "#fee300";
    ul3.style.display = "none";
}

ul4.style.display = "none";
ellipsis.onmouseover = function () {
    this.style.background = "black";
    ul4.style.display = "block";
}
ellipsis.onmouseleave = function () {
    this.style.background = "#fee300";
    ul4.style.display = "none";
}

// 轮播图
function move(eleNode, target, attr) {
    var g = getComputedStyle;
    clearInterval(eleNode.timer);
    eleNode.timer = setInterval(function () {
        var iNow = attr === "opacity" ? g(eleNode)[attr] * 100 : parseInt(g(eleNode)[attr]);
        var speed = (target - iNow) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        iNow += speed;
        eleNode.style[attr] = attr === "opacity" ? iNow / 100 : iNow + "px";
        iNow === target ? clearInterval(eleNode.timer) : "";
    }, 50)
}

var
    prevBtn = document.getElementById("prev_btn"),
    nextBtn = document.getElementById("next_btn"),
    bannerContainer = document.getElementById("banner_container"),
    bannerList = bannerContainer.children,
    index = 0;
nextBtn.addEventListener("click", toNext);
prevBtn.addEventListener("click", toPrev);
setInterval(toNext, 3000);
bannerContainer.onmouseover = function () {
    prevBtn.style.display = "block";
    nextBtn.style.display = "block";
}
prevBtn.onmouseover = function () {
    prevBtn.style.display = "block";
    nextBtn.style.display = "block";
}
nextBtn.onmouseover = function () {
    prevBtn.style.display = "block";
    nextBtn.style.display = "block";
}
bannerContainer.onmouseleave = function () {
    prevBtn.style.display = "none";
    nextBtn.style.display = "none";
}

function toNext() {
    if (index === bannerList.length - 1) {
        bannerContainer.style.left = 0;
        index = 1;
    } else {
        index++;
    }
    animate();
}
function toPrev() {
    if (index === 0) {
        bannerContainer.style.left = -(bannerList.length - 1) * 1380 + "px";
        index = bannerList.length - 2;
    } else {
        index--;
    }
    animate();
}
function animate() {
    move(bannerContainer, -index * 1380, "left");
}
function init() {
    // 让ul的宽度可以容下所有的li;
    bannerContainer.style.width = 100 * bannerList.length + "%";
}
init();

// 主要内容
var json = [
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/0174025ca5d01da8012141685bf1d9.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "好运常伴:)",
        h3: "插画-商业插画",
        icon: "./images/4.png",
        tip: "https://img.zcool.cn/community/031eaec5bfad739a801209252928ca6.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "云雨桐",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/015dda5c81d8a1a80120af9ac44a45.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "小人物，小世界",
        h3: "插画-插画习作",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0151535c27670ea80121df90257e86.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "呵呵呵",
        span: "1天前",
    },
    {
        img: "https://img.zcool.cn/community/017b525ca5cbc3a801208f8b701d3c.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "一期一会一梦鱼",
        h3: "摄影-人像",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/043a655803b3b1a84a0f320d4211ef.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "ddddd",
        span: "1小时前",
    },
    {
        img: "https://img.zcool.cn/community/011cd45ca5bae4a801208f8b70c123.jpg",
        h2: "致敬",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/04680b5549b44800000123cab57c4b.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "宏远",
        span: "2天前",
    },
    {
        img: "https://img.zcool.cn/community/01e0f45ca58238a8012141686796c1.jpg@260w_195h_1c_1e_1o_100sh.jpg",
        h2: "不一样",
        h3: "插画-商业插画",
        icon: "./images/3.png",
        tip: "https://img.zcool.cn/community/0482b3554092ac0000017c505174a7.jpg@80w_80h_1c_1e_1o_100sh.jpg",
        a: "站酷",
        span: "2天前",
    },
]
var str = "";
for (var i = 0; i < json.length; i++) {
    str +=
        '<div class="box">' +
        '<img id="change" src="' + json[i].img + '" alt="">' +
        '<h2>' + json[i].h2 + '</h2>' +
        '<h3>' + json[i].h3 + '</h3>' +
        '<img class="icon" src="' + json[i].icon + '"alt="">' +
        '<hr>' +
        '<div class="bottom">' +
        '<div class="time">' +
        '<img src="' + json[i].tip + '" alt="">' +
        '<a href="">' + json[i].a + '</a>' +
        '<span>' + json[i].span + '</span>' +
        '</div>' +
        '</div>' +
        '</div>'
}
module.innerHTML = str;

// //鼠标划入淡出功能
var change = document.getElementById("change"),
    timer = null;

change.addEventListener("mouseenter", startMove);
change.addEventListener("mouseleave", endMove);

function startMove() {
    moves(75);
}
function endMove() {
    moves(100);
}
function getStyle(dom, attr) {
    return getComputedStyle(dom)[attr];
}
function moves(tar) {
    clearInterval(timer);
    timer = setInterval(function () {
        var iNow = getStyle(change, "opacity") * 100;
        var speed = (tar - iNow) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        change.style.opacity = (iNow + speed) / 100;
        if (iNow === tar) {
            clearInterval(timer);
        }
    }, 10)
}

var page = document.getElementById("page");
var list = page.querySelectorAll("li");
for (var i = 0; i < list.length; i++) {
    list[i].onmouseenter = function () {
        this.style.background = "yellow"
    }
    list[i].onmouseleave = function () {
        this.style.background = "white"
    }
}
 
goTop.onclick = function(){
    //兼容
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
}

var title=document.getElementById("tit");
var titleTop=title.offsetTop;
document.onscroll=function(){
    var btop = document.body.scrollTop||document.documentElement.scrollTop;
    if(btop>titleTop){
        title.style.position = "fixed";
        title.style.top="-68px";
    }else{
        title.style.position = "static";
    }
}